import styled from 'styled-components';
import React, { CSSProperties, useState } from 'react';
import { Input, Button as AntdButton, List } from 'antd';
import { PlusOutlined, OrderedListOutlined } from '@ant-design/icons';
const { Search } = Input;

import { ListItem, Button  } from '..';

export interface CategoryListItem {
    label: string;
    key: string;
    icon?: React.ReactNode;
    description?: string;
}

export interface CategoryListProps {
    style?: CSSProperties;
    items: Array<CategoryListItem>;
    activeKey: string | null;
    onChange: (key: string | null, item: CategoryListItem | null) => Promise<void>;
    onAdd?: () => Promise<void>;
    filter?: boolean;
}


export const CategoryList: React.FC<CategoryListProps> = (props) => {

    const [filter, setFilter] = useState<string>('');

    return (
        <Container style={props.style}>
            {
                props.filter && <Header>
                    <Search
                        style={{
                            flex: 1
                        }}
                        styles={{}}
                        placeholder="Filter"
                        allowClear={true}
                        onChange={(event) => {
                            setFilter(event.target.value);
                        }} onSearch={(value) => {
                            setFilter(value);
                        }} />
                    {
                        props.onAdd && <AddButton>
                            <AntdButton
                                icon={<PlusOutlined />}
                                onClick={async () => {
                                    props.onAdd && await props.onAdd();
                                }}
                            ></AntdButton>
                        </AddButton>
                    }
                </Header>
            }
            <ListContainer>
                <List
                    style={{
                        width: '100%',
                        flex: 1,
                        overflow: 'auto'
                    }}
                    itemLayout="horizontal"
                    dataSource={props.items}
                    renderItem={(item, index) => (
                        <ListItem
                            key={`category_list_${index}`}
                            icon={
                                <Button
                                    active={item.key === props.activeKey}
                                    width={40}
                                    icon={item.icon ? item.icon : <OrderedListOutlined />}
                                ></Button>
                            }
                            reverseFill={true}
                            title={item.label}
                            active={item.key === props.activeKey}
                            description={item.description}
                            onClick={async () => {
                                props.onChange(item.key, item);
                            }}></ListItem>
                    )}
                />
            </ListContainer>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const Header = styled.div`
    height: 45px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    background-color: #EFEFEF;
    align-items: center;
    justify-content: space-between;
`;

const AddButton = styled.div`
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
`;

const ListContainer = styled.div`
    flex: 1;
    width: 100%;
    display: flex;
`;